<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="78px">
      <el-form-item label="租户名称" prop="tenantName">
        <el-input
          v-model="queryParams.tenantName"
          placeholder="请输入业务方租户名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商户号" prop="tenantNo">
        <el-input
          v-model="queryParams.tenantNo"
          placeholder="请输入业务方商户号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="客户姓名" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单号" prop="mchOrderNo">
        <el-input
          v-model="queryParams.mchOrderNo"
          placeholder="请输入签约订单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="签约状态" prop="signStatus">
        <el-select v-model="queryParams.signStatus"  clearable size="small">
          <el-option label="待签约" value="0" />
          <el-option label="签约中" value="1" />
          <el-option label="签约成功" value="2" />
          <el-option label="签约失败" value="3" />
          <el-option label="已解约" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡类型" prop="bankCardType">
        <el-select v-model="queryParams.bankCardType"  clearable size="small">
          <el-option label="储蓄卡" value="0" />
          <el-option label="信用卡" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['signRecord:record:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="recordList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="租户名称" align="center" prop="tenantName" />
      <el-table-column label="商户号" align="center" prop="tenantNo"/>
      <el-table-column label="客户姓名" align="center" prop="customerName" />
      <el-table-column label="签约订单号" align="center" prop="mchOrderNo" />
      <el-table-column label="持卡人姓名" align="center" prop="payerName" />
      <el-table-column label="持卡人证件类型" align="center" prop="idType" />
      <el-table-column label="持卡人证件号码" align="center" prop="idNo" />
      <el-table-column label="支付银行卡号" align="center" prop="bankCardNo" />
      <el-table-column label="银行卡类型" align="center" prop="bankCardType" :formatter="formatCardType" />
      <el-table-column label="签约状态" align="center" prop="signStatus" :formatter="formatSignStatus"/>
      <el-table-column label="签约id" align="center" prop="signNo" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleLog(scope.row)"
            v-hasPermi="['signRecord:record:signLog']"
          >签约日志</el-button>
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="text"-->
<!--              icon="el-icon-edit"-->
<!--              v-if="scope.row.signStatus ==2"-->
<!--              v-hasPermi="['signRecord:record:unsign']"-->
<!--              @click="doUnsign(scope.row)"-->
<!--            >解约</el-button>-->
        </template>

      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog title="签约日志信息" :visible.sync="open" width="80%" :before-close="clearData" >
      <el-table :data="gridData" v-loading="dialLoading">
         <el-table-column property="tenantName" label="商户名称" width="120"></el-table-column>
         <el-table-column property="customerName" label="客户姓名" width="120"></el-table-column>
         <el-table-column property="signType" label="签约类型" width="90" :formatter="formatType"></el-table-column>
        <el-table-column property="jpOrderNo" label="流水号" width="120"></el-table-column>
        <el-table-column property="signNo" label="签约id" width="200"></el-table-column>
        <el-table-column property="orderStatus" label="短信订单状态" width="200"></el-table-column>
        <el-table-column property="bankCode" label="银行编码" width="200"></el-table-column>
        <el-table-column property="errCode" label="错误编号" width="120"></el-table-column>
        <el-table-column property="errMsg" label="错误信息" width="200"></el-table-column>

      </el-table>

      <pagination
        v-show="logTotal>0"
        :total="logTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getLogList"
      />
    </el-dialog>

  </div>
</template>

<script>

import {exportRecord, listLog, listRecord, unsign} from "@/api/sign/record";
import {altMchWithdrawal} from "@/api/splitaccount/account";

export default {
  name: "Record",
  data() {
    return {
      gridData: [],
      // 遮罩层
      loading: true,
      dialLoading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 签约记录表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      logTotal:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tenantId: null,
        tenantName: null,
        tenantNo: null,
        customerId: null,
        customerName: null,
        mchOrderNo: null,
        orderAmount: null,
        mchReqTime: null,
        payerName: null,
        idType: null,
        idNo: null,
        bankCardNo: null,
        mobileNo: null,
        expireDate: null,
        creditCvv: null,
        signStatus: null,
        signNo: null,
        bankCardType:null
      },

      params:{
        pageNum: 1,
        pageSize: 10,
        signRecordId:null,
        id:null,

      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询签约记录列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then(response => {
        this.recordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getLogList() {
      this.dialLoading = true;
      listLog(this.params).then(response => {
        this.gridData = response.rows;
        this.logTotal = response.total;
        this.dialLoading = false;
      });

    },
    doUnsign(row) {
      this.params.id = row.id;
      this.$modal.confirm('是否确认解约？').then(() => {
        return unsign(this.params);
      }).then(response => {
        if(response.code ===200){
          alert("解约成功");
        }else{
          alert(response.msg);
        }
        this.getList();

      }).catch(() => {
      });
    },


    clearData() {
      this.gridData = [];
      this.open = false;
    },
    formatSignStatus(row) {
      if (row.signStatus === 0) {
        return '待签约'
      } else if (row.signStatus === 1) {
        return '签约中'
      } else if (row.signStatus === 2) {
        return "签约成功";
      } else if (row.signStatus === 3) {
        return "签约失败";
      } else if (row.signStatus === 4) {
        return "已解约";
      }

    },
    formatType(row) {
      if (row.signType === 0) {
        return '短信签约';
      } else if (row.signType === 1) {
        return '接口签约';
      }
    },
    formatCardType(row) {
      if (row.bankCardType === 0) {
        return '储蓄卡';
      } else if (row.bankCardType === 1) {
        return '信用卡';
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        tenantId: null,
        tenantName: null,
        tenantNo: null,
        customerId: null,
        customerName: null,
        mchOrderNo: null,
        orderAmount: null,
        mchReqTime: null,
        payerName: null,
        idType: null,
        idNo: null,
        bankCardNo: null,
        mobileNo: null,
        expireDate: null,
        creditCvv: null,
        signStatus: 0,
        signNo: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    handleLog(row) {
      this.params.signRecordId = row.id;
      this.open = true;
      this.getLogList();
    },


    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有签约记录数据项？').then(() => {
        this.exportLoading = true;
        return exportRecord(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }

  }

}
</script>
